<template>
    <div style="height:700px;">
        <div style="padding:0 10px 20px 0">
            <el-button type="primary" @click="handlerAddRow" size="mini" >添加工序</el-button>
            <!-- <el-button type="primary" @click="handleChange" size="mini">展开/收起</el-button>
            <el-button type="primary" @click="handleChange2" size="mini">横排/竖排</el-button> -->
        </div>
        <div style="text-align: center;min-width:600px;max-width:98%;margin:auto;max-height:660px;overflow: scroll;">
            <div v-for="(itemdata, indexdata) in data" style="min-width:200px;margin:10px auto; transform: rotate(360deg);">
                <vue2-org-tree
                :data="itemdata"
                :horizontal="horizontal"
                :label-class-name="labelClassName"
                collapsable
                :zoom="zoom"
                :pan="pan"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="NodeClick"
                v-slot:toggle-icon="{ node, expanded }">
                <span v-if="expanded">
                <!-- 展开状态的图标 -->
                <i class="el-icon-bottom"></i>
                </span>
                <span v-else>
                <!-- 折叠状态的图标 -->
                <i class="el-icon-circle-plus-outline"></i>
                </span>
                </vue2-org-tree>
            </div>
        </div>
        
        <!-- 创建浮窗盒子 -->
        <!-- @on-node-mouseover="onMouseover"
        @on-node-mouseout="onMouseout" -->
        <!-- <div v-show="BasicSwich" class="floating">
            <p>配件序号:{{ BasicInfo.peijianxuhao }}</p>
            <p>配件类型:{{ BasicInfo.peijianleixing }}</p>
            <p>本工序:{{ BasicInfo.bengongxu }}</p>
            <p>到工序:{{ BasicInfo.daogongxu }}</p>
            <p>到配件类型:{{ BasicInfo.daopeijianleixing }}</p>
            <p>报工:{{ BasicInfo.baogong }}</p>
            <p>来源:{{ BasicInfo.laiyuan }}</p>
            <p>生产周期:{{ BasicInfo.shengchanzhouqi }}</p>
            <p>工艺难度:{{ BasicInfo.gongyinandu }}</p>
            <p>工价:{{ BasicInfo.gongjia }}</p>
            <p>备注:{{ BasicInfo.beizhu }}</p>
        </div>  -->
    </div>
  </template>
   
  <script>
import { RFC_2822 } from 'moment';

  export default {
    data() {
      return {
        
        labelClassName: "bg-color-orange",
        BasicSwich: false,
        BasicInfo: {},
        checked: true,
        horizontal: true,
        checked2: true,
        zoom: true,
	    	pan: true,
        nodeData: [],
        expandFlag: true,
      };
    },
    props: {
        data: {
            type: [Object, Array],
            default() {
                return {}
            }
        },
    },
    watch:{
        data:{
            immediate:true,
            handler:function(news,olds){
                this.toggleExpand(this.data, true);
            }
        }
    },
    components: {},
   
    mounted(){
        this.toggleExpand(this.data, true);
    },
    created() {
    
    },
    methods: {
       
        // 横排竖排切换方法
        handleChange2() {
            this.horizontal = !this.horizontal;
        },
        // 展开收起方法
        handleChange() {
            this.expandFlag = !this.expandFlag;
            this.toggleExpand(this.data, this.expandFlag);
        },
        onMouseout(e, data) {
            this.BasicSwich = false;
        },
        onMouseover(e, data) {
            this.BasicInfo = data;
            this.BasicSwich = true;
            var floating = document.getElementsByClassName("floating")[0];
            floating.style.left = e.clientX - 50 + "px";
            floating.style.top = e.clientY -10 + "px";
        },
        NodeClick(e, data) {

            // 当前项的所有详情 如：id label children
        },
        collapse(list) {
            var _this = this;
            list.forEach(function (child) {
            if (child.expand) {
                child.expand = false;
            }
            child.children && _this.collapse(child.children);
            });
        },
        onExpand(e, data) {
            if ("expand" in data) {
            data.expand = !data.expand;
            if (!data.expand && data.children) {
                this.collapse(data.children);
            }
            } else {
              this.$set(data, "expand", true);
            }
        },
        toggleExpand(data, val) {
            var _this = this;
            if (Array.isArray(data)) {
            data.forEach(function (item) {
                _this.$set(item, "expand", val);
                if (item.children) {
                _this.toggleExpand(item.children, val);
                }
            });
            } else {
            this.$set(data, "expand", val);
            if (data.children) {
                _this.toggleExpand(data.children, val);
            }
            }
        },
        // 添加工序方法
        handlerAddRow(){
          this.$emit('hadnlerFlowMenu',0, [])
        },
        // 添加，编辑，删除
        handleAddDel(arg, rowdata){
            if(arg == 'addTreeSel'){ //添加新工序
                this.$emit('hadnlerFlowMenu',1, rowdata)
            }else if(arg == 'updateTreeSel'){ //编辑工序
                this.$emit('hadnlerFlowMenu',2, rowdata)
            }else if(arg == 'delTreeSel'){ //删除部门
                this.$confirm("你确定要删除当前工艺工序吗", '提示', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: 'warning'
                }).then((res) => {
                    this.$emit('hadnlerFlowMenu', 3, rowdata)
                }).catch(() => {
                    
                })
            }else if(arg == 'addProcess'){//添加工序
                this.$emit('addProcess',this.nodeData);
            }	
		    },

        renderContent(h, rdata) {
            return (<el-dropdown trigger='click' oncommand={(command) => this.handleAddDel(command, rdata)}>
                <a><div style="display:flex;flex-direction: column;justify-content: center;color:#fff;min-height:30px;line-height:30px;padding:5px 0;">
                    <div style="display:block;line-height:20px;">{rdata.wuliaodangan}</div>
                    <div>{rdata.bengongxu}<strong>{rdata.peijianleixing==''?'':'-'+ rdata.peijianleixing}</strong></div>
                    
                    {/* <div style="font-size:12px;margin-top:4px;">({data.end_day - data.start_day + 1 +" "+ day1})</div>
                    {data.start == 1 || data.end == 1 ? data.start == 1 && data.end == 0?<div style="color:#42b983;">{data.start_day}-{data.end_day}</div>:<div style="color:#FF0000;">{data.start_day}-{data.end_day}</div>:<div>{data.start_day}-{data.end_day}</div>} */}
                </div></a>
                <el-dropdown-menu slot='dropdown'>
                    <el-dropdown-item command='addTreeSel'>添加新工序</el-dropdown-item>
                    <el-dropdown-item command='updateTreeSel'>编辑工序</el-dropdown-item>
                    <el-dropdown-item command='delTreeSel' >删除工序</el-dropdown-item >
                    <el-dropdown-item command='addProcess' >工序管理</el-dropdown-item >

                </el-dropdown-menu >
            </el-dropdown >)
		    },
        
    },
  };
  </script>
   
  <style scoped>
  .org-tree-container {
    display: inline-block;
    padding: 15px;
    background-color: #fff;
  }
  .org-tree {
    display: table;
    text-align: center;
  }
  .org-tree:after,
  .org-tree:before {
    content: "";
    display: table;
  }
  .org-tree:after {
    clear: both;
  }
  .org-tree-node,
  .org-tree-node-children {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .org-tree-node-children:after,
  .org-tree-node-children:before,
  .org-tree-node:after,
  .org-tree-node:before {
    transition: all 0.35s;
  }
  .org-tree-node-label {
    position: relative;
    display: inline-block;
  }
  .org-tree-node-label .org-tree-node-label-inner {
    padding: 8px 12px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  }
  .org-tree-node-btn {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 20px;
    height: 20px;
    z-index: 10;
    margin-left: -11px;
    margin-top: 9px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.35s ease;
    display: none;
  }
  .org-tree-node-btn:hover {
    background-color: #e7e8e9;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  .org-tree-node-btn:after,
  .org-tree-node-btn:before {
    content: "";
    position: absolute;
  }
  .org-tree-node-btn:before {
    top: 50%;
    left: 4px;
    right: 4px;
    height: 0;
    border-top: 1px solid #ccc;
  }
  .org-tree-node-btn:after {
    top: 4px;
    left: 50%;
    bottom: 4px;
    width: 0;
    border-left: 1px solid #ccc;
  }
  .org-tree-node-btn.expanded:after {
    border: none;
  }
  .org-tree-node {
    padding-top: 20px;
    display: table-cell;
    vertical-align: top;
  }
  .org-tree-node.collapsed,
  .org-tree-node.is-leaf {
    padding-left: 10px;
    padding-right: 10px;
  }
  .org-tree-node:after,
  .org-tree-node:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 19px;
  }
  .org-tree-node:after {
    left: 50%;
    border-left: 2px solid #333;
  }
  .org-tree-node:not(:first-child):before,
  .org-tree-node:not(:last-child):after {
    border-top: 2px solid #333;
  }
  .collapsable .org-tree-node.collapsed {
    padding-bottom: 30px;
  }
  .collapsable .org-tree-node.collapsed .org-tree-node-label:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 30px;
    border-right: 2px solid #333;
  }
  .org-tree > .org-tree-node {
    padding-top: 0;
  }
  .org-tree > .org-tree-node:after {
    border-left: 0;
  }
  .org-tree-node-children {
    padding-top: 30px;
    display: table;
  }
  .org-tree-node-children:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 30px;
    border-left: 2px solid #333;
  }
  .org-tree-node-children:after {
    content: "";
    display: table;
    clear: both;
  }
  .horizontal .org-tree-node {
    display: table-cell;
    float: none;
    padding-top: 0;
    padding-left: 20px;
  }
  .horizontal .org-tree-node.collapsed,
  .horizontal .org-tree-node.is-leaf {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .horizontal .org-tree-node:after,
  .horizontal .org-tree-node:before {
    width: 19px;
    height: 50%;
  }
  .horizontal .org-tree-node:after {
    top: 50%;
    left: 0;
    border-left: 0;
  }
  .horizontal .org-tree-node:only-child:before {
    top: 1px;
    border-bottom: 2px solid #333;
  }
  .horizontal .org-tree-node:not(:first-child):before,
  .horizontal .org-tree-node:not(:last-child):after {
    border-top: 0;
    border-left: 2px solid #333;
  }
  .horizontal .org-tree-node:not(:only-child):after {
    border-top: 2px solid #333;
  }
  .horizontal .org-tree-node .org-tree-node-inner {
    display: table;
  }
  .horizontal .org-tree-node-label {
    display: table-cell;
    vertical-align: middle;
  }
  .horizontal.collapsable .org-tree-node.collapsed {
    padding-right: 30px;
  }
  .horizontal.collapsable .org-tree-node.collapsed .org-tree-node-label:after {
    top: 0;
    left: 100%;
    width: 30px;
    height: 50%;
    border-right: 0;
    border-bottom: 2px solid #333;
  }
  .horizontal .org-tree-node-btn {
    top: 50%;
    left: 100%;
    margin-top: -11px;
    margin-left: 9px;
  }
  .horizontal > .org-tree-node:only-child:before {
    border-bottom: 0;
  }
  .horizontal .org-tree-node-children {
    display: table-cell;
    padding-top: 0;
    padding-left: 20px;
  }
  .horizontal .org-tree-node-children:before {
    top: 49%;
    left: 0;
    width: 30px;
    height: 0;
    border-left: 0;
    border-top: 2px solid #333;
  }
  .horizontal .org-tree-node-children:after {
    display: none;
  }
  .horizontal .org-tree-node-children > .org-tree-node {
    display: block;
  }
  .bg-color-orange {
    color: #fff;
    background-color: #b22222;
  }
  /deep/ .el-dropdown{
    min-width:90px;
  }
  /deep/ .el-dropdown div{
     min-height:24px;line-height: 20px!important;
  }


  /* 盒子css */
  .floating {
    background: rgba(255,255,255,.9);
    width: 200px;
    min-height: 300px;
    position: absolute;
    color: #333;
    padding: 15px;
    border-radius: 4px;
    padding-left: 4px; 
    box-sizing: border-box;
    left: 0;
    top: 0;
    transition: all 0.3s;
    z-index: 999;
    text-align: left;
    font-size: 12px;
    line-height:18px;
    box-shadow: 1px 7px 6px 5px rgba(0,0,0,.1);
  }
  a{color:#fff;}
  </style>